<template>
  <div>
    <h2>销售记录管理</h2>
    <!-- 搜索表单 -->
    <div class="search-form">
      <el-input v-model="searchForm.customer" placeholder="客户" style="width: 100px;"></el-input>
      <el-input v-model="searchForm.customerPhone" placeholder="客户电话" style="width: 100px;"></el-input>
      <!-- 销售金额范围 -->
      <el-input v-model="searchForm.salesAmountMin" placeholder="金额最小值" style="width: 100px;"></el-input>
      <el-input v-model="searchForm.salesAmountMax" placeholder="金额最大值" style="width: 100px;"></el-input>
      <el-input v-model="searchForm.salespersonName" placeholder="销售人" style="width: 100px;"></el-input>
      <!-- 销售时间范围 -->
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange">
      </el-date-picker>
      <el-button class="blue-button" @click="fetchSalesList">查询</el-button>
      <el-button class="red-button" @click="clearSearchForm">清空条件</el-button>
    </div>
    <!-- 销售记录表格 -->
    <el-table
      :data="salesList"
      stripe
      hover-effect
      border
      style="width: 100%"
      :loading="isLoading">
      <el-table-column prop="customer" label="客户"></el-table-column>
      <el-table-column prop="customerPhone" label="客户电话"></el-table-column>
      <el-table-column prop="salespersonName" label="销售人"></el-table-column>
      <el-table-column prop="salesAmount" label="销售金额"></el-table-column>
      <el-table-column prop="salesTime" label="销售时间" :formatter="formatSalesTime"></el-table-column>
      <el-table-column prop="orderId" label="订单 ID"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '../utils/request'; 
import { ElPagination, ElInput, ElButton, ElDatePicker, ElTable, ElTableColumn } from 'element-plus';
import dayjs from 'dayjs';

const salesList = ref([]);
const currentPage = ref(1); 
const pageSize = ref(10); 
const total = ref(0); 
const searchForm = ref({
  page: currentPage.value,
  pageSize: pageSize.value,
  customer: '',
  customerPhone: '',
  salesAmountMin: '',
  salesAmountMax: '',
  salespersonName: '',
  startDate: '',
  endDate: ''
});
const dateRange = ref([]);
const isLoading = ref(false);

const handleDateChange = (value) => {
  if (value && value.length === 2) {
    searchForm.value.startDate = dayjs(value[0]).format('YYYY-MM-DD');
    searchForm.value.endDate = dayjs(value[1]).format('YYYY-MM-DD');
  } else {
    searchForm.value.startDate = '';
    searchForm.value.endDate = '';
  }
};

const fetchSalesList = async () => {
  try {
    // 验证输入范围
    if (
      searchForm.value.salesAmountMin && searchForm.value.salesAmountMax &&
      parseFloat(searchForm.value.salesAmountMin) > parseFloat(searchForm.value.salesAmountMax)
    ) {
      console.error('销售金额最小值不能大于最大值');
      return;
    }
    isLoading.value = true;
    searchForm.value.page = currentPage.value;
    searchForm.value.pageSize = pageSize.value;
    const response = await request.get('/sale_record/getSaleRecords', {
      params: searchForm.value
    });
    salesList.value = response.data.list;
    total.value = response.data.total;
  } catch (error) {
    console.error('获取销售记录失败:', error);
  } finally {
    isLoading.value = false;
  }
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchSalesList();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchSalesList();
};

const clearSearchForm = () => {
  searchForm.value = {
    page: 1,
    pageSize: 10,
    customer: '',
    customerPhone: '',
    salesAmountMin: '',
    salesAmountMax: '',
    salespersonName: '',
    startDate: '',
    endDate: ''
  };
  dateRange.value = [];
  currentPage.value = 1;
  pageSize.value = 10;
  fetchSalesList();
};

// 格式化销售时间的函数
const formatSalesTime = (row, column, cellValue) => {
  return dayjs(cellValue).format('YYYY年MM月DD日 HH:mm:ss');
};

onMounted(() => {
  fetchSalesList();
});
</script>

<style scoped>
.search-form {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.search-form > el-date-picker {
  flex: 0 1 200px;
  min-width: 0;
}

.search-form > el-button {
  flex: 0 0 auto;
}

.red-button {
  background-color: #f5222d; /* 红色背景色 */
  color: #fff; /* 白色文字颜色 */
  border: none;
  transition: background-color 0.3s; /* 添加过渡效果，使鼠标悬停时颜色变化更平滑 */
}
.blue-button{
  background-color: #00bfff; /* 蓝色背景色 */
  color: #fff; /* 白色文字颜色 */
  border: none;
  transition: background-color 0.3s; /* 添加过渡效果，使鼠标悬停时颜色变化更平滑 */
}

.red-button:hover {
  background-color: #cf1322; /* 鼠标悬停时的背景色，颜色加深 */
}
.blue-button:hover {
  background-color: #009acd; /* 鼠标悬停时蓝色按钮背景色加深 */
}
</style>